<template>
  <!-- 我的页面展示信息的tab -->
  <ul class="mine-bar">
    <li class="mine-bar-item">
      <div class="bar-num" :class="isVip ? 'vip' : ''">
        {{ userInfo.popularity || "0" }}
      </div>
      <div class="bar-title">人气</div>
    </li>
    <li class="mine-bar-item">
      <div class="bar-num" :class="isVip ? 'vip' : ''">
        {{ userInfo.integral || "0" }}
      </div>
      <div class="bar-title">积分</div>
    </li>
    <li class="mine-bar-item">
      <div class="bar-num" :class="isVip ? 'vip' : ''">
        {{ userInfo.fans || "0" }}
      </div>
      <div class="bar-title">粉丝</div>
    </li>
    <li class="mine-bar-item">
      <div class="bar-num" :class="isVip ? 'vip' : ''">
        {{ userInfo.focus || "0" }}
      </div>
      <div class="bar-title">关注</div>
    </li>
  </ul>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "MineBar",
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapGetters("user", ["isVip"]),
  },
};
</script>

<style lang="less" scoped>
.mine-bar {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 0.5rem;
  .mine-bar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 20%;
    cursor: pointer;
    .bar-num,
    .bar-title {
      margin: 0.1rem 0;
    }
    .bar-num {
      font-size: 0.4rem;
    }
    .bar-title {
      color: rgba(223, 217, 217, 0.735);
    }
  }
}
</style>